<template>
  <div class="app-container">
    <el-row :gutter="15">
      <el-col style="margin-bottom: 10px">
        <el-card class="box-card" shadow="never">
          <div slot="header" class="clearfix">
            <span class="role-span">字段配置：{{ tableName }}</span>
          </div>
          <el-form size="small" label-width="90px">
            <el-table
              v-loading="loading"
              :data="data"
              :max-height="tableHeight"
              size="small"
              style="width: 100%; margin-bottom: 15px"
            >
              <el-table-column prop="sqlName" label="字段名称" />
              <el-table-column prop="remarks" label="字段描述">
                <template slot-scope="scope">
                  <el-input
                    v-model="data[scope.$index].remarks"
                    size="mini"
                    class="edit-input"
                  />
                </template>
              </el-table-column>
              <el-table-column align="center" label="必填" width="70px">
                <template slot-scope="scope">
                  <el-checkbox v-model="data[scope.$index].notNull" />
                </template>
              </el-table-column>
              <el-table-column align="center" label="列表" width="70px">
                <template slot-scope="scope">
                  <el-checkbox v-model="data[scope.$index].listShow" />
                </template>
              </el-table-column>
              <el-table-column align="center" label="表单" width="70px">
                <template slot-scope="scope">
                  <el-checkbox v-model="data[scope.$index].formShow" />
                </template>
              </el-table-column>
              <el-table-column label="表单类型">
                <template slot-scope="scope">
                  <el-select
                    v-model="data[scope.$index].formType"
                    filterable
                    class="edit-input"
                    clearable
                    size="mini"
                    placeholder="请选择"
                  >
                    <el-option label="文本框" value="Input" />
                    <el-option label="文本域" value="Textarea" />
                    <el-option label="单选框" value="Radio" />
                    <el-option label="下拉框" value="Select" />
                    <el-option label="日期框" value="Date" />
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="查询方式">
                <template slot-scope="scope">
                  <el-select
                    v-model="data[scope.$index].queryType"
                    filterable
                    class="edit-input"
                    clearable
                    size="mini"
                    placeholder="请选择"
                  >
                    <el-option label="=" value="=" />
                    <el-option label="!=" value="!=" />
                    <el-option label=">=" value=">=" />
                    <el-option label="<=" value="<=" />
                    <el-option label="Like" value="Like" />
                    <el-option label="NotNull" value="NotNull" />
                    <el-option label="BetWeen" value="BetWeen" />
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="日期注解">
                <template slot-scope="scope">
                  <el-select
                    v-model="data[scope.$index].dateAnnotation"
                    filterable
                    class="edit-input"
                    clearable
                    size="mini"
                    placeholder="请选择"
                  >
                    <el-option label="自动创建时间" value="CreationTimestamp" />
                    <el-option label="自动更新时间" value="UpdateTimestamp" />
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="关联字典">
                <template slot-scope="scope">
                  <el-select
                    v-model="data[scope.$index].dictName"
                    filterable
                    class="edit-input"
                    clearable
                    size="mini"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in dicts"
                      :key="item.id"
                      :label="item.remark === '' ? item.name : item.remark"
                      :value="item.name"
                    />
                  </el-select>
                </template>
              </el-table-column>
            </el-table>
          </el-form>
        </el-card>
      </el-col>
      <el-col>
        <el-card class="box-card" shadow="never">
          <div slot="header" class="clearfix">
            <span class="role-span">生成配置</span>
            <el-button
              :loading="genLoading"
              icon="el-icon-s-promotion"
              size="mini"
              style="float: right; padding: 6px 9px"
              type="success"
              @click="preview"
            >预览</el-button>
            <el-button
              :loading="genLoading"
              icon="el-icon-check"
              size="mini"
              style="float: right; padding: 6px 9px; margin-right: 9px"
              type="primary"
              @click="toGen(0)"
            >生成</el-button>
          </div>
          <el-form
            ref="form"
            :model="form"
            :rules="rules"
            size="small"
            label-width="100px"
          >
            <el-row>
              <el-col :lg="12">
                <el-form-item label="包名" prop="pack">
                  <el-input v-model="form.pack" />
                </el-form-item>
              </el-col>
              <el-col :lg="12">
                <el-form-item label="生成路径" prop="path">
                  <el-input v-model="form.path" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import crud from '@/mixins/crud'
import { getTable, generator, test } from '@/api/generator/generator'
import { downloadFile } from '@/utils/index'
import { getDicts } from '@/api/system/dict'
import db from '@/utils/localstorage'
export default {
  name: 'GeneratorConfig',
  components: {},
  mixins: [crud],
  data() {
    return {
      activeName: 'first',
      tableName: '',
      tableHeight: 550,
      columnLoading: false,
      configLoading: false,
      dicts: [],
      syncLoading: false,
      genLoading: false,
      form: {
        tableName: '',
        pack: '',
        path: ''
      },
      rules: {
        pack: [{ required: true, message: '包路径不能为空', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.tableHeight = document.documentElement.clientHeight - 385
    this.tableName = this.$route.params.tableName
    this.$nextTick(() => {
      this.init()
      getDicts().then((data) => {
        this.dicts = data
      })
    })
  },
  methods: {
    beforeInit() {
      this.url = 'api/generator/getTable/' + this.tableName
      return true
    },
    loadData(data) {
      const tableDb = db.get(this.tableName)
      this.form = tableDb
      const columns = tableDb.columnInfos

      if (columns == null || columns.length == 0) {
        return
      }
      if (this.data.length == 0) {
        this.data = columns
      }
      for (var i = 0; i < this.data.length; i++) {
        const newColumn = this.data[i]
        const exist = true
        for (var k = 0; k < columns.length; k++) {
          const oldColumn = columns[i]
          if (newColumn.sqlName === oldColumn.sqlName) {
            break
          }
          exist = false
        }
        if (!exist) {
          oldColumn.push(oldColumn)
        }
      }
      for (var i = 0; i < columns.length; i++) {
        const oldColumn = this.data[i]
        const exist = true
        for (var k = 0; k < this.data.length; k++) {
          const newColumn = columns[i]
          if (newColumn.sqlName === oldColumn.sqlName) {
            break
          }
          exist = false
        }
        if (!exist) {
          this.data.splice(i, 1)
        }
      }
      this.data = columns
    },
    preview() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          const data = this.form
          data['tableName'] = this.tableName
          data['columnInfos'] = this.data
          db.save(this.tableName, data)
          this.$router.push({
            path: '/sys-tools/generator/preview',
            query: { res: JSON.stringify(data) }
          })
        }
      })
    },

    toGen(type) {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          const data = this.form
          data['tableName'] = this.tableName
          data['columnInfos'] = this.data
          this.genLoading = true
          db.save(this.tableName, data)
          if (data.path == null && type != 1) {
            type = 2
          }
          // 生成代码
          generator(this.tableName, type, data)
            .then((data) => {
              if (type == 2) {
                downloadFile(data, this.tableName, 'zip')
              }
              this.genLoading = false
              this.notify('生成成功', 'success')
            })
            .catch((err) => {
              this.genLoading = false
            })
        }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
.edit-input {
  .el-input__inner {
    border: 1px solid #e5e6e7;
  }
}
</style>

<style scoped>
::v-deep .input-with-select .el-input-group__prepend {
  background-color: #fff;
}
</style>
